<script setup lang="ts">
import { RouterView } from 'vue-router'
import { useThemeConfig } from '@/utils/theme'
import { useAppStore } from '@/stores/app'
import { watch, onMounted } from 'vue'

// 主题配置
const themeConfig = useThemeConfig()
const appStore = useAppStore()

// 动态设置主题属性
const updateThemeAttribute = () => {
  const root = document.documentElement
  if (appStore.isDarkMode) {
    root.setAttribute('data-theme', 'dark')
  } else {
    root.removeAttribute('data-theme')
  }
}

// 监听主题变化
watch(() => appStore.isDarkMode, updateThemeAttribute, { immediate: true })

// 组件挂载时设置主题
onMounted(() => {
  updateThemeAttribute()
})
</script>

<template>
  <a-config-provider :theme="themeConfig" :locale="zhCN">
    <div id="app">
      <RouterView />
    </div>
  </a-config-provider>
</template>

<script lang="ts">
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');
</script>

<style>
#app {
  height: 100%;
  width: 100%;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--primary-color-lightest, #f7fbfc);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: var(--primary-color-medium, #b9d7ea);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color-dark, #769fcd);
}

/* Ant Design 样式覆盖 */
.ant-layout {
  background: var(--primary-color-lightest, #f7fbfc);
}

.ant-card {
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
}

.ant-table-thead > tr > th {
  background: var(--primary-color-light, #d6e6f2);
  font-weight: 600;
}

/* 暗色主题下的样式调整 */
:root[data-theme="dark"] .ant-card {
  box-shadow: 0 1px 2px 0 rgba(255, 255, 255, 0.03), 0 1px 6px -1px rgba(255, 255, 255, 0.02), 0 2px 4px 0 rgba(255, 255, 255, 0.02);
}

.ant-btn {
  border-radius: 6px;
}

.ant-input, .ant-select-selector, .ant-textarea {
  border-radius: 6px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .ant-table {
    font-size: 12px;
  }

  .ant-table-thead > tr > th,
  .ant-table-tbody > tr > td {
    padding: 8px 4px;
  }
}
</style>
